<template>
	<view class="list-view">
		<scroll-view 
			style="height: 100%;" 
			:scroll-y="true" 
			lower-threshold="50"
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			@refresherrefresh="onRefresh"
			@scrolltolower="onToLower" 
		>
			<view class="item" v-for="item in 10" :key="item">
				<view class="header">
					<view class="no">
						<image class="order-icon" src="/src/static/order/list/order-icon.png" mode="aspectFill"></image>
						<text>202390481023</text>
					</view>
					<view class="status status-1">已核销</view>
				</view>
				<nut-divider />
				<view class="content">
					<view class="name">唯蔓妮丨会员免单节</view>
					<view class="desc">
						预留姓名：张
					</view>
					<view class="desc">
						我的电话：18855530123
					</view>
					<view class="desc">
						购买时间：2025-06-21 15:25
					</view>
					<view class="desc">
						核销截至：2025-09-02 12:00
					</view>
				</view>
				<nut-divider />
				<view class="footer">
					<view class="price">¥399</view>
					<view class="btns">
						<view class="btn-look">
							<nut-button type="primary">查看</nut-button>
						</view>
						<view class="btn-use">
							<nut-button type="primary">立即核销</nut-button>
						</view>
					</view>
				</view>
			</view>
			<view class="nothing">
				没有更多了
			</view>
			<!-- <Empty v-if="!dataList.length && !loading" /> -->
			<view class="safe-area-bottom"></view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import Empty from '@/components/Empty/index.vue'

const searchForm = reactive({
	page: 1,
	page_size: 10
})
const loading = ref(false)

const triggered = ref(false)

const dataList = ref([])

const lastPage = ref(0)

const getList = async () => {
	loading.value = true
	uni.showLoading({
		title: '加载中',
		mask: true
	});
	setTimeout(() => {
		loading.value = false
		uni.hideLoading()
		triggered.value = false
	}, 200)
	// const res = await getOrders('luck', searchForm)
	// loading.value = false
	// uni.hideLoading()
	// if (triggered.value) {
	// 	triggered.value = false
	// }
	// dataList.value = [...(searchForm.page === 1 ? [] : dataList.value), ...res.data]
	// lastPage.value = res.meta.last_page
}

const onToLower = () => {
	if (searchForm.page < lastPage.value) {
		searchForm.page++
		getList()
	}
}

const onRefresh = () => {
	triggered.value = true
	searchForm.page = 1
	getList()
}

onMounted(() => {
  getList()
})

</script>

<style lang="scss" scoped>
.list-view {
	position: relative;
	height: 100vh;
	.item {
		overflow: hidden;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 28rpx;
		.header {
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20rpx;
			margin: 0 40rpx;
			.no {
				display: flex;
				align-items: center;
				gap: 10rpx;
				.order-icon {
					width: 32rpx;
					height: 32rpx;
				}
				text {
					color: #999;
					font-size: 24rpx;
				}
			}
			.status {     
				font-size: 28rpx;                                     
				font-weight: 700;
			}
			.status-1 {
				color: #00BAAD;
			}
			.status-2 {
				color: #ABABAB;
			}
			.status-3 {
				color: #FF8D1A;
			}
		}
		:deep(.nut-divider) {
			margin: 0 24rpx;
		}
		.content {
			margin: 0 40rpx;
			padding: 20rpx 0;
			.name {
				font-size: 28rpx;                                     
				font-weight: 700;
				margin-bottom: 20rpx;
			}
			.desc {
				color: #BFBFBF;
				font-size: 24rpx;
				margin-bottom: 10rpx;
				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}
		.footer {
			height: 114rpx;
			margin: 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20rpx;
			.price {
				font-size: 32rpx;                                     
				font-weight: 700;
				color: #FF8D1A;
			}
			.btns {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 20rpx;
				:deep(.btn-look .nut-button) {
					height: 60rpx;
					background: #C1B8FF !important;
				}
				:deep(.btn-use .nut-button) {
					height: 60rpx;
					background: #9585FF !important;
				}
			}
		}
	}
	.nothing {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		padding-bottom: 28rpx;
	}
}
</style>